<template>
	<section class="heyan">
		<p class="first"  v-show="step===1" style="text-align: center;">
			<img  src="../assets/faceauto.gif" style="width:500px;height:500px;"/>
		</p>

		<div  class="second" v-show="step===2" style="text-align:center;width: 600px;height: 504px;">
			<img   src="../assets/20180923140449.png" style="margin-top: 100px;"/>
			<p @click="heyan(1)" v-show="step===2" style="text-align: center;">
				<span v-if="goOnHeyan">核验下一个身份</span>
				<!--<span v-if="!goOnHeyan">关闭</span>-->
			</p>
		</div>

		<p  class="third" v-show="step===3" style="text-align: center;">
			<img   src="../assets/20180923140502.png"/>
			<p @click="heyan(1)" v-show="step===3" style="text-align: center;"><span>重新验证</span></p>
		</p>


	</section>
</template>

<script>
	export default{
		props:{
			heyanPeople:0,
			goOnHeyan:'',
		},
		data(){
			return{
				step:1,
			}
		},
		methods:{
			heyan(val){
				if(val===2){
					this.$emit("changeHeYanPeople");
				}
				if(val===1){
					setTimeout(()=>{
						this.heyan(2);
					},2000)
				}
				this.step=val;
			}
		},
		mounted(){
					setTimeout(()=>{
						this.heyan(2);
					},2000)
		},
		watch:{
			heyanPeople(val){
//				alert(val)
//				this.step=1;
			}
		}
	}
</script>

<style scoped="scoped">
	p span{
		width: 200px;
	    border: solid 1px rgb(214,114,2);
	    display: inline-block;
	    height: 35px;
	    line-height: 35px;
	    border-radius: 27px;
	    color: rgb(214,114,2);
	    font-size: 18px;
	}

</style>
